1、组件下载
vue 与vuex的版本对应关系：Vue 2 匹配的 Vuex 3
Vue 3 匹配的 Vuex 4
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
官方网站：https://vuex.vuejs.org/zh/
1 // npm 2 npm install vuex@next --save 3 4 // yarn 5 yarn add vuex@next --save
2、项目中定义及配置
在src目录下新增store目录，创建index.js文件，内容如下
1 // 1. 导入所需的包
2 import Vue from 'vue'
3 import Vuex from 'vuex'
4 // 2. 将Vuex注册为Vue的插件
5 Vue.use(Vuex)
6 // 3. 创建 store 实例对象
7 const store = new Vuex.Store({
8 // 配置vuex
9 strict: true, // 开启严格模式,防止小白在组件中使用的时候直接修改state数据
10 // state 用于存储数据(存储状态) (vuex状态管理)
11 state: {
12 sex: 23,
13 uname: 'badWoman',
14 list: [
15 { id: 1, name: '吃饭', isDone: true },
16 { id: 2, name: '睡觉', isDone: false },
17 { id: 3, name: '听歌', isDone: true }
18 ]
19 },
20 // mutations 是 vuex 中"唯一"可以修改 state 数据的方法, 不支持异步更新,只能放同步代码
21 mutations: {
22 abc (state, n) {
23 state.sex = n
24 }
25 },
26 // actions 里面放异步方法
27 actions: {
28 newSex (store, n) {
29 setTimeout(() => {
30 store.commit('abc', n) // 只要是修改state中内容, 都通过mutations中的方法进行操作
31 }, 3000)
32 }
33 },
34 // getters 是vuex中的计算属性(和组件中的计算属性意义一样,但是不支持set修改)
35 // 为了方便获取state中的数据;插件作者会给每个计算属性方法,传递一个 state 参数
36 getters: {
37 ccc (state) {
38 return state.sex * state.sex
39 },
40 all (state) {
41 return state.list.every(item => item.isDone === true)
42 }
43 }
44 })
45 // 4. 导出 store 对象
46 export default store
main.js
1 import Vue from 'vue'
2 import App from './App.vue'
3 // 导入定义的store目录下的index.js文件
4 // import store from '@/store/index.js' // 如果导入某个目录下的index文件, 则可以省略index
5 import store from '@/store'
6 Vue.config.productionTip = false
7
8 new Vue({
9 store, // 将导入的store添加到vue实例
10 render: h => h(App)
11 }).$mount('#app')
组件AnyOne.vue
1 <template>
2 <div>
3 <h2>随便一个组件-1</h2>
4 <!-- 使用vuex中状态, state中的uname -->
5 <p>{{ $store.state.uname }}</p>
6 <!-- 使用vuex中状态, state中的sex -->
7 <p>{{ $store.state.sex }}</p>
8 <!-- 使用vuex中配置的计算属性 -->
9 <p>{{ $store.getters.ccc }}</p>
10 <p>{{ $store.getters.all }}</p>
11
12 <!-- 调用mutations中定义的修改state的方法abc, 并传递参数5000 -->
13 <button @click="$store.commit('abc', 5000)">更新sex</button>
14 <br />
15 <!-- 调用actions中定义的异步方法newSex，并传递参数20 -->
16 <button @click="$store.dispatch('newSex', 20)">3s后更新sex</button>
17 </div>
18 </template>
19
20 <script>
21 export default {}
22 </script>
23 <style lang="less" scoped></style>
组件AnyTwo.vue
1 <template>
2 <div>
3 <h2>随便一个组件-2</h2>
4 <!-- 使用计算属性 -->
5 <!-- <P>{{ sex }}</P> -->
6 <p>{{ uname }}</p>
7 <P>{{ nianLing }}</P>
8 <P>{{ uname }}</P>
9 <P>{{ ccc }}</P>
10 <P>{{ all }}</P>
11 <button @click="abc(100)">更新年龄</button>
12 <br />
13 <button @click="newSex(200)">三秒后更新年龄</button>
14 </div>
15 </template>
16
17 <script>
18 // 导入vuex中提供的一些方法
19 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
20 export default {
21 // data () {
22 // return {
23 // sex: 1777
24 // }
25 // },
26 computed: {
27 // mapState提供一种简写方式: ...mapState() 传想要获取的状态信息, 拿到当前页面作为计算属性使用
28 // ...mapState(['sex', 'uname', 'list']), // 数组写法
29
30 // 给从state中获取的状态取别名，防止与当前页面重名，作为当前页面的计算属性
31 ...mapState({ nianLing: 'sex', uname: 'uname', list: 'list' }), // 对象写法, 相当于取别名, 防止与data中的变量重名
32
33 // 将vuex中的getters拿到当前页面作为当前页面的计算属性
34 ...mapGetters(['ccc', 'all'])
35 },
36 methods: {
37 // 将vuex中mutations定义的方法拿到当前页面作为当前页面的方法
38 ...mapMutations(['abc']),
39 ...mapActions(['newSex'])
40 }
41 }
42 </script>
43 <style lang="less" scoped></style>
根组件App.vue
1 <template>
2 <div>
3 <AnyOne></AnyOne>
4 <hr />
5 <AnyTwo></AnyTwo>
6 </div>
7 </template>
8
9 <script>
10 import AnyOne from './components/AnyOne.vue'
11 import AnyTwo from './components/AnyTwo.vue'
12 export default {
13 data () {
14 return {}
15 },
16 components: {
17 AnyOne,
18 AnyTwo
19 }
20 }
21 </script>
22 <style lang="less" scoped></style>
3、使用
4、简化调用数据
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'通过vuex中的一些方法将定义的store中的内容拿到当前页面
标签：vue,Vuex,前端,介绍,sex,state,import,vuex,store From： https://www.cnblogs.com/wang1001/p/18122722