vuex 中 store 报错的解决方式
泛域名ssl证书 239元1年送1个月、单域名39元1年，Sectigo（原Comodo证书）全球可信证书，强大的兼容性，高度安全性,如有问题7天内可退、可开发票
加微信VX 18718058521 备注SSL证书
【腾讯云】2核2G4M云服务器新老同享99元/年，续费同价
介绍
Store的代码结构一般由State、Getters、Mutation、Actions这四种组成，也可以理解Store是一个容器，Store里面的状态与单纯的全局变量是不一样的，无法直接改变store中的状态。想要改变store中的状态，只有一个办法，显示地提交mutation。
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters:{
},
mutations: {
},
actions: {
}
})
简单的Store
小朋友，要是没有安装vue-cli，不要看这个文档，看了也没用，咳咳···，创建一个vue项目直截了当，找到一个合适的文件夹，在此目录下打开终端，使用vue-cli命令行创建项目（项目名为murenziwei）
1 | vue create murenziwei |
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
按下Enter，等da我现在只需要一个能运行的vue项目就行，命令执行完成后，文件夹会自动生成一个vue项目
按照上面图片红色框的命令来执行
1 2 3 | /*切换目录*/<br>cd murenziwei/*启动项目*/npm run serve |
启动项目完毕后，打开浏览器，输入从终端得到的网址
到这，我们开始安装router、vuex。此时的项目结构如图以下
Ctrl+C退出启动，继续执行vue-cli，脚手架安装插件router和vuex开始
安装插件router
1 | vue add router |
输入一个大写Y，按下Enter
安装插件vuex
做法同上
1 | vue add vuex |
我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改
启动vue项目，npm run serve，在store.js中添加一个新状态count
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count:1 }, mutations: { }, actions: { }}) |
修改组件HelloWorld，开始使用Store里注册的新状态
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <template> <div class="hello"> <h1>{{ this.$store.state.count }}</h1> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h3 { margin: 40px 0 0;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style> |
浏览效果
往store.js里的mustations添加改变状态值的加减功能，
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count:1 }, mutations: { addmu(state){state.count++}, lessmu(state){state.count--} }, actions: { }}) |
回到HelloWorld组件， 添加增加和减少按钮，用来提交store的mutation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <template> <div class="hello"> <h1>{{ this.$store.state.count }}</h1> <div> <button @click="addfn()">增加</button> <button @click="lessfn()">减少</button> </div> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }, methods:{ addfn(){ //提交名为addmu的mutations this.$store.commit('addmu'); }, lessfn(){ //提交名为lessmu的mutations this.$store.commit('lessmu'); } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h3 { margin: 40px 0 0;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style> |
效果如下
由于mutation必须同步执行的限制，不方便实现复杂的功能。不过，别担心，看见了那个Actions吗？它就不受约束！我们可以在 它内部执行异步操作
修改store.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count:1 }, mutations: { addmu(state){state.count++}, lessmu(state){state.count--} }, actions: { addac({commit}){commit('addmu')}, lessac({commit}){commit('lessmu')} }}) |
修改HelloWorld组件，将提交mutation改为分发Action，Actions支持载荷方式和对象方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <template> <div class="hello"> <h1>{{ this.$store.state.count }}</h1> <div> <button @click="addfn()">增加</button> <button @click="lessfn()">减少</button> </div> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }, methods:{ addfn(){ //以载荷方式分发 this.$store.dispatch('addac'); }, lessfn(){ //以对象方式分发 this.$store.dispatch({type:'lessac'}); } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h3 { margin: 40px 0 0;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style> |
效果如下
为了更直观的感受下Store的魅力，在views文件夹中添加一个About.vue也使用store状态
About.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template> <div class="about"> <h1>This is an about page</h1> <HelloWorld/> </div></template><script>// @ is an alias to /srcimport HelloWorld from '@/components/HelloWorld.vue'export default { name: 'home', components: { HelloWorld }}</script> |
跳转About.vue或者Home.vue，store里面的状态值是怎么样的就是怎么样的？
